<template>
  <view class="demo-code-input">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <fu-code-input
        v-model="code1"
        :focus="true"
        @complete="onComplete"
      />
    </view>
    
    <!-- 自定义长度 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义长度</view>
      <fu-code-input
        v-model="code2"
        :length="6"
      />
    </view>
    
    <!-- 下划线模式 -->
    <view class="demo-block">
      <view class="demo-block__title">下划线模式</view>
      <fu-code-input
        v-model="code3"
        mode="underline"
      />
    </view>
    
    <!-- 密码模式 -->
    <view class="demo-block">
      <view class="demo-block__title">密码模式</view>
      <fu-code-input
        v-model="code4"
        :mask="true"
      />
    </view>
    
    <!-- 禁用状态 -->
    <view class="demo-block">
      <view class="demo-block__title">禁用状态</view>
      <fu-code-input
        v-model="code5"
        disabled
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code1: '',
      code2: '',
      code3: '',
      code4: '',
      code5: '1234'
    }
  },
  
  methods: {
    onComplete(value) {
      uni.showToast({
        title: `输入完成：${value}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.demo-code-input {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 8rpx;
  
  &__title {
    margin-bottom: 30rpx;
    font-size: 28rpx;
    color: #909399;
  }
}
</style> 